<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">
		<!-- Google Chrome Frame也可以让IE用上Chrome的引擎: -->
		<meta name="renderer" content="webkit">
		<!--国产浏览器高速模式-->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="author" content="穷在闹市" />
		<!-- 作者 -->
		<meta name="revised" content="穷在闹市.v3, 2019/05/01" />
		<!-- 定义页面的最新版本 -->
		<meta name="description" content="网站简介" />
		<!-- 网站简介 -->
		<meta name="keywords" content="搜索关键字，以半角英文逗号隔开" />
		<title>订单管理</title>

		<!-- 公共样式 开始 -->
		<link rel="stylesheet" type="text/css" href="../../css/base.css">
		<link rel="stylesheet" type="text/css" href="../../css/iconfont.css">
		<script type="text/javascript" src="../../framework/jquery-1.11.3.min.js"></script>
		<link rel="stylesheet" type="text/css" href="../../layui/css/layui.css">
		<script type="text/javascript" src="../../layui/layui.js"></script>
		<!-- 滚动条插件 -->
		<link rel="stylesheet" type="text/css" href="../../css/jquery.mCustomScrollbar.css">
		<script src="../../framework/jquery-ui-1.10.4.min.js"></script>
		<script src="../../framework/jquery.mousewheel.min.js"></script>
		<script src="../../framework/jquery.mCustomScrollbar.min.js"></script>
		<script src="../../framework/cframe.js"></script><!-- 仅供所有子页面使用 -->
		<!-- 公共样式 结束 -->
		
		<style>
			.layui-table img {
			    max-width: none;
			}
		</style>
	</head>

	<body>
		<div class="cBody">
			<div class="console">
				<form class="layui-form" action="">
					<div class="layui-form-item">
						<div class="layui-input-inline">
							<input type="text" name="name" required lay-verify="required" placeholder="输入商品订单" autocomplete="off" class="layui-input">
						</div>
						<button class="layui-btn" lay-submit lay-filter="formDemo">查找</button>
					</div>
				</form>

				<script>
					layui.use('form', function() {
						var form = layui.form;
				
						//监听提交
						form.on('submit(formDemo)', function(data) {
							layer.msg(JSON.stringify(data.field));
							return false;
						});
					});
				</script>
			</div>
			
			<table class="layui-table">
				<thead>
					<tr>
						<th>订单编号</th>
						<th>收货人</th>
						<th>商品名称</th>
						<th>商品图片</th>
						<th>商品数量</th>
						<th>订单金额</th>
						<th>支付金额</th>
						<th>联系方式</th>
						<th>收货地址</th>
						<th>订单状态</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr th:each="order : ${orderDelivers}">
						<td name="orderNum" th:text="${order.getOrderNum()}">订单编号</td>
						<td th:text="${order.getReceivingName()}">收货人</td>
						<td th:text="${order.getProductName()}">商品名称</td>
						<td>
							<img th:src=" @{${order.getProductPicture()}}" src="../../images/goodsPIC1.png " width="20" height="20" onmouseenter="imgBig(this)" onmouseleave="imgSmall(this)"/>
						</td>
						<td th:text="${order.getProductCount()}">商品数量</td>
						<td th:text="${order.getSubtotal()}">订单金额</td>

						<td th:text="${order.getOrderMoney()}">支付金额</td>
						<td th:text="${order.getReceivingPhone()}">联系方式</td>
						<td th:text="${order.getAddress()}">收货地址</td>
						<td >
							<p class="unpaid" th:if="${order.orderStatus=='unpaid'}">未支付</p>
							<p class="waitReceiving" th:if="${order.orderStatus=='waitReceiving'}">已发货</p>
							<p class="waitEvaluated" th:if="${order.orderStatus=='waitEvaluated'}">待评价</p>
							<p class="waitShipped" th:if="${order.orderStatus=='waitShipped'}">待发货</p>
							<p class="waitShipped" th:if="${order.orderStatus=='cancel'}">已取消</p>
							<p class="closed" th:if="${order.orderStatus=='closed'}">关闭</p>
						</td>
						<td>
							<button class="layui-btn layui-btn-xs delivery " >
								<p name="waitReceiving1" th:if="${order.orderStatus=='waitReceiving'}">已发货</p>
								<p name="waitShipped1" class="dbtn" th:if="${order.orderStatus=='waitShipped'}">发货</p>
								<p name="waitShipped1" th:if="${order.orderStatus=='cancel'}">已取消</p>
							</button>
							<button class="layui-btn layui-btn-xs cancel" onclick="cancel()">取消</button>
						</td>
					</tr>

				</tbody>
			</table>
			<!-- layUI 分页模块 -->
			<div id="pages"></div>
			<script type="text/javascript">
				/**
				 * 订单发货
				 * @param orderNum
				 */
				$(function () {
					$("[name=waitShipped1]").click(function () {
						var orderNums=$("[name=orderNum]").val();
						console.log(orderNums);
						$.ajax({
							url:'/orderList',
							type:'pose',
							dataType:status,
							data:{
								orderNums:orderNums,
							},
							dataType:'json',
							complete:function (p) {
								if (p.responseText == '1')
									p.innerHTMLZ='已发货'
							},
							sucess:function (data) {
								alert("发货成功");
							},
							error:function (e) {
								alert("发货失败")
							}
						});
					});
				})

				layui.use('laypage', function() {
					var laypage = layui.laypage;
					//总页数大于页码总数
					laypage.render({
					    elem: 'pages'
					    ,count: 100
					    ,layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
					    ,jump: function(obj){
//					      console.log(obj)
					    }
					});
				});
				//修改规格
				function specificationsBut(){
					layui.use('layer', function() {
						var layer = layui.layer;
						
						//iframe层-父子操作
						layer.open({
							type: 2,
							area: ['70%', '60%'],
							fixed: false, //不固定
							maxmin: true,
							content: 'specifications_list.html'
						});
					});
					
				}
				//取消按钮
				function cancel(){
					
				}
			</script>
		</div>
	</body>

</html>